<template>
  <div class="toolbar">
    <div class="top-tool">
      <a @click="toggleSelect" href="javascript:;"><img src="../assets/images/add-btn.png" alt="" /></br>添加</a>
      <div class="show-select" transition='add' v-show="addState">
        <span @click="addNote" v-if="classList.length">新建笔记</span>
        <span @click="showAddClass">新建文件夹</span>
      </div>
    </div>
    <ul class="classify">
      <li @mousedown="onmousedown($index , $event)" v-for="data in classList" :class="{'cur':data == curClass}">
        <i></i>
        <a href="#" v-text="data.name"></a>
      </li>
      <li class="add-class" v-if="addClassState">
        <i></i>
        <input type="text" id="className" @blur="addClass" v-model="className">
      </li>
    </ul>
    <!--select-->
    <div class="down-select" v-if="downSelect" :style="{'top':client.Y+'px','left':client.X+'px'}" transition='add'>
      <span @click="delClass">删除</span>
      <span>重命名</span>
      <span>上移</span>
      <span>下移</span>
    </div>
  </div>
</template>
<script type="text/javascript">
  import { classAll , addClass , setCurNote , setNoteList , delClass , curClass , editState , showMsg} from '../vuex/actions.js'
  import $ from '../assets/lib/jquery-3.0.0.min.js'
  export default{
    data(){
      return {
        addState:false,
        className:'',
        addClassState:false,
        index:'',
        downSelect:false,
        client:{
          X:0,
          Y:0
        }
      }
    },
    vuex:{
      getters:{
        classList:(state) => state.classList,
        curClass:(state) => state.curClass,
        isEditor:(state) => state.isEditor,
        noteList:(state) => state.noteList,
      },
      actions:{
        _classAll:classAll,
        _addClass:addClass,
        _delClass:delClass,
        _curClass:curClass,
        _setNoteList:setNoteList,
        _editState:editState,
        _setCurNote:setCurNote,
        _showMsg:showMsg,
      }
    },
    methods:{
      //文件夹右击
      onmousedown(index , e){
        if(e.button === 2){
          this.index = index;
          this.downSelect = true;
          this.client = {Y:e.clientY , X:e.clientX};
          //绑定事件
          document.addEventListener('click' , this.hideSelect , false);
        }else{
          this._curClass(index);
          this.hideSelect();
        };
      },
      //删除文件夹
      delClass(){
        let self = this;
        let data = self.classList[self.index];
        //执行删除
        if(confirm("是否确定删除此文件夹和文件夹内的笔记?")){
          $.post('http://localhost:8888/delClass' , {id:data._id} , (res) => {
            if(res.state == 'ok'){
              self._delClass(self.index);
              if(self.index >= self.classList.length-1){
                if(self.classList.length){
                  self._curClass(self.classList.length-1);
                }else{
                  //清空
                  self._setNoteList([]);
                  self._curClass(0);
                  self._setCurNote(0);
                };
              }else{
                self._curClass(self.classList.length-1);
              };
              self._showMsg('删除成功!');
            }else{
              alert('删除失败');
            };
          },'JSON');
        };
      },
      hideSelect(){
        this.downSelect = false;
        document.removeEventListener('click' , this.hideSelect);
      },
      toggleSelect(){
        this.addState = !this.addState;
      },
      //显示添加
      showAddClass(){
        this.className = '新建文件夹';
        this.addClassState = true;
        //获取光标
        setTimeout(() => {
            document.querySelector("#className").select();
        });
        this.toggleSelect();
      },
      //添加分类
      addClass(){
        const self = this;
        let data = {
          name:self.className || '新建文件夹'
        };
        $.post('http://localhost:8888/addClass' , data , (res) => {
          if(res.state == 'ok'){
            let l = self.classList.length;
            self.addClassState = false;
            self._addClass(res.data);
            self._curClass(l);
            self._editState(true);
          }else{
            alert('添加失败');
          };
        } , 'JSON');
      },
      //添加文件夹
      addNote(){
        const self = this;
        let note = {
          title:"无标题笔记",
          classId:self.curClass._id,
          brief:'',
        };
        $.post("http://localhost:8888/add-note" , note , (res) => {
          if(res.state == 'ok'){
            //添加数据
            self.noteList.unshift(res.data);
            //设置当前编辑文档
            self._setCurNote(0);
            //编辑状态
            self._editState(true);
            self.toggleSelect();
            setTimeout(() => {
              document.querySelector('#title').select();
            });
          }else{
            alert(res.message);
          };
        },'JSON');
      }
    },
    ready(){
      const self = this;
      $.get('http://localhost:8888/getClass' , (res) => {
        self._classAll(res.data);
        //设置默认选中
        self._curClass(0);
      } , 'JSON');
      //右击阻止
      document.oncontextmenu = (e) => {
        e = e || window.event;
        e.preventDefault(this.defaultName);
       };
    }
  }
</script>
<style scoped>
  a:focus{
    outline:none;
  }
  .toolbar{
    width:190px;
    height:100%;
    background:#fafafa;
    position:relative;
  }
  .top-tool{
    padding:25px 20px;
    text-align:center;
    font-size:16px;
    border-bottom:1px solid #ddd;
    position:relative;
  }
  /*分类列表*/
  .classify{
    width:100%;
    position:absolute;
    top:116px;
    bottom:0;
    overflow-y:auto;
  }
  .classify li{
    width:190px;
    box-sizing:border-box;
    padding:5px 20px;
    cursor:pointer;
    position:relative;
    transition:color 0.15s,background 0.15s;
  }
  .classify .info{
    height:22px;
    line-height:22px;
    position:relative;
  }
  .classify li span{
    color:#484848;
    margin-top:5px;
    display:block;
    font-size:12px;
  }
  .classify li:hover{
    background:#ebeef3;
  }
  .classify li:hover a{
    color:#19B5FE;
  }
  .classify li i{
    display:inline-block;
    width:26px;
    height:26px;
    position:absolute;
    top:50%;
    left:20px;
    margin-top:-12px;
    background:url("../assets/images/note-icon.png") no-repeat;
  }
  .classify li a{
    font-weight:normal;
    display:block;
    width:100%;
    padding-left:30px;
    box-sizing:border-box;
    font-size:14px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
  }
  .classify .cur,
  .classify .cur:hover{
    background:#398dee;
  }
  .classify .cur a,
  .classify .cur:hover a{
    color:#fff;
  }
  /*添加*/
  .classify .add-class{
    padding-left:50px;
  }
  .classify .add-class input{
    width:100%;
    display:block;
    box-sizing:border-box;
    height:23px;
    padding:0 5px;
    border:1px solid #eee;
  }

  /*down-select*/
  .down-select{
    width:100px;
    background:#fff;
    box-shadow:0px 1px 16px 0 rgba(90, 109, 122, 0.41);
    border-radius:2px;
    position:fixed;
    z-index:10;
  }
  .down-select > span{
    display:block;
    font-size:12px;
    line-height:30px;
    color:#999;
    padding:0 20px;
    cursor:pointer;
    transition:background 0.15s,color 0.15s;
  }
  .show-select{
    margin-left:-60px;
    left:50%;
    top:105px;
  }
</style>
